<template>
  <div class="user-manage-container">
    <div class="coffee-bg"></div>
    <el-card class="coffee-card">
      <div slot="header" class="header-actions">
        <span>用户管理</span>
        <el-button type="primary" @click="showAddDialog = true" size="small" style="float:right">添加用户</el-button>
      </div>
      <el-table :data="users" style="width: 100%; margin-top: 20px" class="coffee-table">
        <el-table-column prop="username" label="用户名" width="120" />
        <el-table-column prop="nickname" label="昵称" width="120" />
        <el-table-column prop="roleName" label="角色" width="120" />
        <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === '正常' ? 'success' : 'info'" :class="scope.row.status === '正常' ? 'coffee-tag' : ''">{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="260">
          <template slot-scope="scope">
            <el-button size="mini" @click="editUser(scope.row)">编辑</el-button>
            <el-button size="mini" type="warning" @click="resetPwd(scope.row)">重置密码</el-button>
            <el-button size="mini" type="danger" @click="deleteUser(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 添加/编辑用户对话框 -->
    <el-dialog :visible.sync="showAddDialog" :title="editMode ? '编辑用户' : '添加用户'" width="400px" class="coffee-dialog">
      <el-form :model="userForm" :rules="rules" ref="userFormRef" label-width="80px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="userForm.username" :disabled="editMode" />
        </el-form-item>
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="userForm.nickname" />
        </el-form-item>
        <el-form-item label="角色" prop="role">
          <el-select v-model="userForm.role" placeholder="请选择角色">
            <el-option label="管理员" value="guanliyuan" />
            <el-option label="店长" value="dianzhang" />
            <el-option label="收银员" value="shouyinyuan" />
            <el-option label="咖啡师" value="kafeishi" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="!editMode" label="密码" prop="password">
          <el-input v-model="userForm.password" type="password" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showAddDialog = false">取消</el-button>
        <el-button type="primary" @click="saveUser">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      users: [],
      showAddDialog: false,
      editMode: false,
      userForm: {
        username: '',
        nickname: '',
        role: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        nickname: [
          { required: true, message: '请输入昵称', trigger: 'blur' }
        ],
        role: [
          { required: true, message: '请选择角色', trigger: 'change' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, message: '密码至少6位', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.loadUsers()
  },
  methods: {
    loadUsers() {
      this.users = JSON.parse(localStorage.getItem('userList') || '[]')
    },
    saveUser() {
      this.$refs.userFormRef.validate(valid => {
        if (!valid) return
        if (this.editMode) {
          const idx = this.users.findIndex(u => u.username === this.userForm.username)
          this.users.splice(idx, 1, { ...this.userForm, roleName: this.getRoleName(this.userForm.role), status: '正常' })
        } else {
          if (this.users.some(u => u.username === this.userForm.username)) {
            this.$message.error('用户名已存在')
            return
          }
          this.users.push({ ...this.userForm, roleName: this.getRoleName(this.userForm.role), status: '正常' })
        }
        localStorage.setItem('userList', JSON.stringify(this.users))
        this.$message.success('保存成功')
        this.showAddDialog = false
        this.editMode = false
        this.loadUsers()
      })
    },
    editUser(row) {
      this.userForm = { ...row, password: '' }
      this.editMode = true
      this.showAddDialog = true
    },
    deleteUser(row) {
      this.$confirm('确定要删除该用户吗？', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.users = this.users.filter(u => u.username !== row.username)
        localStorage.setItem('userList', JSON.stringify(this.users))
        this.$message.success('删除成功')
      }).catch(() => {
        // 用户点击取消按钮时，不执行任何操作
      })
    },
    resetPwd(row) {
      this.$prompt('请输入新密码', '重置密码', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputType: 'password',
        inputPattern: /^.{6,}$/,
        inputErrorMessage: '密码至少6位'
      }).then(({ value }) => {
        const idx = this.users.findIndex(u => u.username === row.username)
        this.users[idx].password = value
        localStorage.setItem('userList', JSON.stringify(this.users))
        this.$message.success('密码已重置')
      })
    },
    getRoleName(role) {
      switch (role) {
        case 'guanliyuan': return '管理员'
        case 'dianzhang': return '店长'
        case 'shouyinyuan': return '收银员'
        case 'kafeishi': return '咖啡师'
        default: return ''
      }
    }
  }
}
</script>
<style scoped>
.user-manage-container {
  padding: 40px;
  min-height: 100vh;
  background: linear-gradient(135deg, #e7d2ba 0%, #b08968 100%);
  position: relative;
  overflow: hidden;
}
.coffee-bg {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  z-index: 0;
  pointer-events: none;
  background: url('https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/72x72/2615.png') repeat 0 0/120px auto;
  opacity: 0.06;
}
.coffee-card {
  border-radius: 18px;
  box-shadow: 0 8px 32px 0 rgba(80, 60, 40, 0.10);
  border: 1px solid #e0c3a0;
  background: rgba(255, 255, 255, 0.97);
}
.header-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1;
}
.el-button--primary {
  background: linear-gradient(90deg, #a47149 0%, #7c4f22 100%);
  border: none;
  color: #fff;
  font-weight: bold;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(124, 79, 34, 0.08);
  transition: background 0.2s;
}
.el-button--primary:hover {
  background: linear-gradient(90deg, #7c4f22 0%, #a47149 100%);
}
.el-button--warning {
  background: linear-gradient(90deg, #e6a23c 0%, #b08968 100%);
  border: none;
  color: #fff;
  font-weight: bold;
  border-radius: 8px;
}
.el-button--danger {
  background: linear-gradient(90deg, #a47149 0%, #7c4f22 100%);
  border: none;
  color: #fff;
  font-weight: bold;
  border-radius: 8px;
}
.el-input__inner {
  background: #f8f5f2;
  border-radius: 8px;
  border: 1px solid #e0c3a0;
}
.el-select .el-input__inner {
  background: #f8f5f2;
  border-radius: 8px;
  border: 1px solid #e0c3a0;
}
.coffee-table {
  background: rgba(255,255,255,0.96);
  border-radius: 12px;
  box-shadow: 0 2px 12px 0 rgba(124, 79, 34, 0.08);
  overflow: hidden;
}
.coffee-table th, .coffee-table td {
  background: transparent !important;
}
.coffee-tag {
  background: #e7d2ba !important;
  color: #7c4f22 !important;
  border: none !important;
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.coffee-dialog .el-dialog {
  border-radius: 16px;
  box-shadow: 0 4px 18px 0 rgba(124, 79, 34, 0.10);
  border: 1px solid #e0c3a0;
  background: rgba(255, 255, 255, 0.98);
}
</style> 